import '@/styles/LoginRegisterCommon.css'
import { useNavigate } from 'react-router-dom';
import React, { useState } from 'react';
import axios from 'axios';
import { message } from 'antd';

const Register = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate()
    const [isAnimatedUsername, setIsAnimatedUsername] = useState(false)
    const [isAnimatedPassword, setIsAnimatedPassword] = useState(false);

    const handleFocus = (params) => {
        if (params === 'username') setIsAnimatedUsername(true)
        if (params === 'password') setIsAnimatedPassword(true)
    }
    const handleBlur = (params) => {
        if (params === 'username' && !username) setIsAnimatedUsername(false);
        if (params === 'password' && !password) setIsAnimatedPassword(false);
    }
    const handleSubmit = () => {

    }
    const handleLoginClick = () => {
        navigate('/login')
    }

    return <div className="big">
        <div className="container">
            <form onSubmit={handleSubmit}>
                <h2>Register</h2>
                <div className="item">
                    <input
                        type="email" value={username}
                        onFocus={() => handleFocus('username')}
                        onBlur={() => handleBlur('username')}
                        onChange={(e) => setUsername(e.target.value)}
                    />
                    <label className={isAnimatedUsername ? 'animated-class' : ''}>Username</label>
                </div>
                <div className="item">
                    <input
                        type="password"
                        onFocus={() => handleFocus('password')}
                        onBlur={() => handleBlur('password')}
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                    <label className={isAnimatedPassword ? 'animated-class' : ''}>Password</label>
                </div>
                <button>Enter</button>
                <div className="forgot-password">
                    <a href="#">忘记密码？</a>
                </div>
                <div className="conversion" onClick={handleLoginClick}>
                    已有账号？前去登录
                </div>
            </form>    
        </div>
    </div>

}
export default Register